<template>
  <div class="plc-read-dialog">
    <el-form :model="PlcRead" size="small" label-width="100px" label-position="left">
      <el-form-item label="设备" width="120px">
        <el-select
            v-model="PlcRead.DataSourceId"
            @change="onPlcChange"
            placeholder="请选择设备"
            clearable
            style="width: 90%"
        >
          <el-option
              v-for="item in optionDevices"
              :key="item.Id"
              :label="item.DeviceName"
              :value="item.Id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地址">
        <div class="plc-read-item" v-for="(read,r_index) in PlcRead.ReadParams" :key="r_index">
          <el-input v-model="read.ParamName" class="plc-read-item-param-name" placeholder="请输入变量名"></el-input>
          <el-select
              v-model="read.DataSourceId"
              placeholder="请选择地址"
              style="width: 90%;margin-left:6px;"
              clearable
          >
            <el-option
                v-for="item in optionAddress"
                :key="item.Id"
                :label="item.Name"
                :value="item.Id"
            >
            </el-option>
          </el-select>
          <div class="plc-read-adds">
            <el-button
                v-if="PlcRead.ReadParams.length>1"
                icon="Delete"
                @click.prevent="DeleteReadParam(r_index)"
                type="warning"
                size="small"
                circle
            ></el-button>
            <el-button
                v-if="r_index === PlcRead.ReadParams.length-1"
                class=""
                icon="Plus"
                @click.prevent="AddReadParam"
                type="success"
                size="small"
                circle
            ></el-button>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="结束条件" width="120px">
        <div style="display: flex">
          <el-select
              v-model="PlcRead.EndConditions[0].Operator"
              clearable
              placeholder="请选择"
              style="padding-right: 10px;width: 125px"
          >
            <el-option
                v-for="item in comparisonOperators"
                :key="item.tip"
                :label="item.tip"
                :value="item.value"
            >
              <span style="float: left">{{ item.value }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.tip }}</span>
            </el-option>
          </el-select>
          <div style="width: 70%;display: flex;align-items: center"
               v-if="PlcRead.EndConditions[0].Operator!='EMPTY' && PlcRead.EndConditions[0].Operator!='NOT_EMPTY'">
            <el-input
                v-model="PlcRead.EndConditions[0].Value1"
                placeholder="条件成立后往下执行，为空不启用"
                clearable
            >
            </el-input>
            <template
                v-if="PlcRead.EndConditions[0].Operator=='BETWEEN'||PlcRead.EndConditions[0].Operator=='NOT_BETWEEN'"
            >
              <el-icon style="margin: 0 10px">
                <Minus/>
              </el-icon>
              <el-input
                  v-model="PlcRead.EndConditions[0].Value2"
                  placeholder="条件成立后往下执行，为空不启用"
                  clearable
              >
              </el-input>
            </template>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="描述">
        <el-input
            v-model="PlcRead.Desc"
            type="textarea"
            :rows="6"
            placeholder="请输入描述"
            style="width: 90%"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import FlowNodeDataApi from '@/api/flow/FlowNodeDataApi'
import { AppParams } from '@/utils/appParams'
import Utils from '../../../../utils/Common.js'
import NodeConfigMixin from '../../../../libs/NodeConfigMixin'
import { MessageWarning } from "@/utils";
import { useFlowStore } from "@/store/modules/flow/flowStore";

export default {
  name: 'DrivePlcReadDialog',
  mixins: [NodeConfigMixin],
  data () {
    return {
      optionDevices: [],
      optionAddress: [],
      comparisonOperators: AppParams.COMMON.COMPARISON_OPERATORS,
      PlcRead: {
        ReadParams: [{ ParamName: null }],
        EndConditions: [{
          Operator: null,
          Value1: null,
          Value2: null
        }],
        DataSource: AppParams.DRIVER_TYPE_PLC,
        DataSourceId: null,
        Target: null,
        TargetId: null,
        address: null,
        NodeId: true,
        IsAddressHub: true,
        Desc: null
      },
      DrivePlcReadDialogVisible: false
    }
  },
  methods: {
    DeleteReadParam (index) {
      this.PlcRead.ReadParams.splice(index, 1)
    },
    AddReadParam () {
      this.PlcRead.ReadParams.push({})
    },
    ShowNodeData () {
      this.DrivePlcReadDialogVisible = true
      this.SetFormValue(this.currentClickNodeMixin)
      this.InitNodeData(this.PlcRead.DataSourceId)
    },
    /**
     * 设置回显的表单数据
     * @param _node
     * @constructor
     */
    SetFormValue (_node) {
      const InputParams = _node.nodeInputParam
      if (!Utils.IsEmpty(InputParams?.NodePLC)) {
        this.onPlcChange(InputParams.NodePLC.DataSourceId);
        const from = {}
        from.DataSource = AppParams.DRIVER_TYPE_PLC
        from.DataSourceId = InputParams.NodePLC.DataSourceId
        from.Desc = InputParams.Desc
        const ReadParams = InputParams.NodePLC.ReadParams
        from.ReadParams = ReadParams
        from.EndConditions = InputParams.NodePLC.EndConditions
        if (Utils.IsEmpty(from.EndConditions) || from.EndConditions.length === 0) {
          from.EndConditions = [{
            Operator: null,
            Value1: null,
            Value2: null
          }]
        }
        this.PlcRead = from
      }
    },
    /**
     * 选中的值
     * @param item
     */
    onPlcChange (item) {
      if (!Utils.IsEmpty(item)) {
        console.log(item)
        this.PlcRead.ReadParams = [{ ParamName: null }];
        const FlowStore = useFlowStore();
        let _Data = item === -99 ? FlowStore.GlobalParams : FlowStore.PlcAddress.filter(p => p.DriverId === item)
        this.optionAddress = _Data
      }
    },
    /**
     * 初始化节点数据
     * @constructor
     */
    InitNodeData () {
      this.optionDevices = this.$store.getters.driver
    },
    _SaveNode (NodeName, NodeCommonInfo) {
      const _plc = Object.assign({}, this.PlcRead)
      if (Utils.IsEmpty(_plc.DataSourceId) || _plc.DataSourceId <= 0) {
        return MessageWarning('请选择设备')
      }
      let sd = true
      let message = ''
      const ParamNames = []
      for (const readParam of _plc.ReadParams) {
        if (Utils.IsEmpty(readParam.DataSourceId) || readParam.DataSourceId <= 0) {
          sd = false
          message += '请选择地址;'
          break
        }
        if (ParamNames.includes(readParam.ParamName)) {
          sd = false
          message += readParam.ParamName + ':变量名称重复，请重新输入;'
          break
        }
        ParamNames.push(readParam.ParamName)
      }
      if (!sd) {
        return MessageWarning(message)
      }
      _plc.EndConditions = _plc?.EndConditions.filter(s => !Utils.IsEmpty(s.Operator))
      if (Utils.IsEmpty(_plc.EndConditions)) {
        _plc.EndConditions = []
      }
      const params = {
        NodePLC: {
          DataSource: _plc.DataSource,
          DataSourceId: _plc.DataSourceId,
          ReadParams: _plc.ReadParams,
          EndConditions: _plc.EndConditions
        },
        Desc: _plc.Desc,
        NodeTimeOut: NodeCommonInfo.NodeTimeOut
      }
      new FlowNodeDataApi().Install(this.currentClickNodeMixin.id, params, NodeName, false, NodeCommonInfo.NodeTimeOut)
    }
  },
  mounted () {
    this.ShowNodeData()
  }
}
</script>

<style lang="less">
.plc-read-dialog {
  overflow-y: auto;
  height: calc(100vh - 220px);

  .plc-read-item {
    display: flex;
    margin-bottom: 10px;

    .plc-read-item-param-name {
      width: 260px;
    }
  }

  .plc-read-adds {
    display: flex;
    flex-direction: row;
    margin-left: 6px;
    align-items: center;
  }
}
</style>
